<!-- 子账号管理页面 -->
<template>
  <LoadingGroup :pending="pending" :error="error" :isEmpty="rows.length === 0">
    <div class="p-3">
      <div class="son-account">
        <div class="head">
          <h1>员工信息</h1>
          <n-button type="info" @click="addClick"> 添加员工 </n-button>
        </div>
        <n-data-table
          :single-line="false"
          :columns="columns"
          :data="data"
          :row-key="rowKey"
          @update:checked-row-keys="handleCheck"
        />
      </div>
    </div>
  </LoadingGroup>
</template>

<script setup>
import { NDataTable, NButton, NTag } from "naive-ui";
import { ref, h } from "vue";

useHead({ title: "子账号管理" });

const state = reactive({
  columns: [
    {
      type: "selection",
      align: "center",
    },
    {
      title: "操作",
      key: "tags",
      align: "center",
      width: "180px",
      render(row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: "20px",
                background: "none",
                cursor: "pointer",
              },
              type: "warning",
              bordered: false,
              onClick: () => handleLook(row, tagKey),
            },
            {
              default: () => tagKey,
            }
          );
        });
        return tags;
      },
    },
    {
      title: "会员账号",
      key: "age",
      align: "center",
    },
    {
      title: "下载次数",
      key: "address",
      align: "center",
    },
    {
      title: "注册时间",
      key: "time",
      align: "center",
    },
  ],
  data: [
    {
      key: 0,
      tags: ["查看", "移除"],
      age: 32,
      address: "111",
      time: "2022-09-07",
    },
    {
      key: 1,
      tags: ["查看", "移除"],
      age: 42,
      address: "222",
      time: "2022-09-08",
    },
    {
      key: 2,
      tags: ["查看", "移除"],
      age: 32,
      address: "333",
      time: "2022-09-09",
    },
    {
      key: 3,
      tags: ["查看", "移除"],
      age: 32,
      address: "333",
      time: "2022-09-09",
    },
    {
      key: 4,
      tags: ["查看", "移除"],
      age: 32,
      address: "333",
      time: "2022-09-09",
    },
  ],
});

const checkedRowKeysRef = ref([]);
const rowKey = (row) => row.key;

const handleCheck = (rowKeys) => {
  console.log(rowKeys);
  checkedRowKeysRef.value = rowKeys;
};

function addClick() {
  console.log("添加员工按钮");
}

// 查看按钮
function handleLook(row, tagKey) {
  if (tagKey === "查看") {
    console.log("这是查看", 11111);
  } else {
    console.log("这是移除", 222222);
  }
}

const { page, limit, pending, error, rows, total, refresh, handlePageChange } =
  await usePage(({ page, limit }) => useMypostListApi(page));

const handleDeleteItem = async ({ id, success, fail }) => {
  let { error } = await useDeletePostApi(id);
  if (error.value) {
    fail();
  } else {
    success();
    refresh();
  }
};

const rowProps = (row) => {
  return {
    style: "cursor: pointer;",
    onClick: () => {
      message.info(row.name);
    },
  };
};

const { columns, data } = toRefs(state);
</script>
<style lang="scss" scoped>
.son-account {
  padding-bottom: 20px;
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    h1 {
      font-size: 20px;
      font-weight: 600;
    }
  }
  :deep(.n-data-table__pagination) {
    display: none;
  }
}
</style>
